<template>
	<view v-if="orderInfo">
		<!--pages/myOrderDetail/myOrderDetail.wxml-->
		<block v-if="orderInfo.order_genre == 4">
			<!-- 订单状态轴 -->
			<view class="order-procedure">
				<view class="state-axis">
					<view :class="'axis-round' + (orderInfo.pay_state == 0 ? '' : ' round-active')"></view>

					<view
						:class="'axis-line' + (orderInfo.tail_money_state == 1 || orderInfo.pay_state == 1 ? ' line-active' : '')"
						v-if="advance.advance_type == 2">
					</view>
					<view
						:class="'axis-round' + (orderInfo.pay_state == 1 || orderInfo.tail_money_state == 1 ? ' round-active' : '')"
						v-if="advance.advance_type == 2">
					</view>

					<view :class="'axis-line' + (orderInfo.status > 1 ? ' line-active' : '')"></view>
					<view :class="'axis-round' + (orderInfo.status > 1 ? ' round-active' : '')"></view>

					<view :class="'axis-line' + (orderInfo.status > 2 ? ' line-active' : '')"></view>
					<view :class="'axis-round' + (orderInfo.status > 2 ? ' round-active' : '')"></view>
				</view>
				<view class="state-txts">
					<view class="state-txt txt-active">{{ advance.advance_type == 1 ? '付全款' : "付定金" }}</view>
					<view :class="'state-txt' + (orderInfo.pay_state == 1 ? ' txt-active' : '')"
						v-if="advance.advance_type == 2">付尾款</view>
					<view :class="'state-txt' + (orderInfo.status > 1 ? ' txt-active' : '')">
						{{ orderInfo.pickup_type == 1 ? '自取' : orderInfo.pickup_type == 2 ? '配送' : '发货' }}
					</view>
					<view :class="'state-txt' + (orderInfo.status > 2 ? ' txt-active' : '')">交易完成</view>
				</view>
			</view>
		</block>
		<view class="list-box" v-if="orderInfo.sell_info && orderInfo.sell_info.length > 0">
			<view class="setTitle">
				<view>商品详情</view>
			</view>
			<view class="order-body" v-for="(goods, index) in goodsList" :key="index">
				<view class="order-img" @tap="details" :data-id="goods.goods_id">
					<image :src="goods.goods_img" mode="aspectFit"></image>
				</view>
				<view class="orderCon">
					<view class="good-name-width flex-spb-cn">
						<!-- <text class="gift_icon">送</text> -->
						<text class="goods_name">{{ goods.goods_name }}</text>
						<view>
							<block
								v-if="(goods.vip_price > 0 || goods.plus_vip_price > 0) && (orderInfo.order_genre == 1 || orderInfo.type == 2)">
								<text v-if="goods.vip_price > 0" class="vip-price-style">VIP</text>
								<text v-else class="plus-vip-price-style">PLUS</text>
							</block>
							<text class='text-color'>￥{{ goods.price }}</text>
							<block v-if="goods.use_integral > 0 && goods.integral_marketing == 2">
								<text class="good-intergral">+{{ goods.use_integral }}{{ integral_name }}</text>
							</block>
						</view>
					</view>
					<view class="flex-spb-cn">
						<view class="flex-col-cn">
							<view class="goods-sku" v-if="goods.sku_json_info && goods.sku_json_info.id">
								{{ goods.sku_json_info.name }}
							</view>
							<view class="order-num">
								<view class="good-num-color">x{{ goods.num }}</view>
							</view>
						</view>
						<view class="underlined_price"
							v-if="(goods.vip_price > 0 || goods.plus_vip_price > 0) && (orderInfo.order_genre == 1 || orderInfo.type == 2)">
							￥{{ goods.original_price }}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 购买详情 -->
		<block v-if="activeIndex == 1">
			<view class="list-box">
				<view class="setList setTitle">
					<text>费用详情</text>
				</view>
				<view class="setList" v-if="orderInfo.use_integral > 0">
					<text class="set-left-title">{{ integral_name }}抵现：</text>
					<block v-if="orderInfo.integral_marketing == 1">
						<text><text class='text-color'>{{ orderInfo.use_integral }}</text>{{ integral_name }} 抵扣<text
								class='text-color'>{{ orderInfo.integral_dis_money }}</text>元</text>
					</block>
					<block v-else>
						<text><text class='text-color'>{{ orderInfo.integral_dis_money }}</text>元 抵扣<text
								class='text-color'>{{ orderInfo.use_integral }}</text>{{ integral_name }}</text>
					</block>
				</view>
				<view class="setList" v-if="orderInfo.vip_less_money && orderInfo.vip_less_money > 0">
					<text class="set-left-title">会员价：</text>
					<text class='text-color'>-{{ orderInfo.vip_less_money }}元</text>
				</view>
				<view class="setList" v-if="orderInfo.cashier_manual_money && orderInfo.cashier_manual_money > 0">
					<text class="set-left-title">单品折扣：</text>
					<text class='text-color'>-{{ orderInfo.cashier_manual_money }}元</text>
				</view>
				<view class="setList" v-if="orderInfo.cashier_dis_money && orderInfo.cashier_dis_money > 0">
					<text class="set-left-title">整单折扣：</text>
					<text class='text-color'>-{{ orderInfo.cashier_dis_money }}元</text>
				</view>
				<view class="setList" v-if="orderInfo.vip_dis_money && orderInfo.vip_dis_money > 0">
					<text class="set-left-title">会员折扣：</text>
					<text class='text-color'>-{{ orderInfo.vip_dis_money }}元</text>
				</view>
				<view class="setList" v-if="orderInfo.coupon_money > 0">
					<text class="set-left-title">优惠券</text>
					<text class='text-color'>-{{ orderInfo.coupon_money }}元</text>
				</view>
				<view class="setList" v-if="orderInfo.pay_coupon_fee > 0">
					<text class="set-left-title">代金券金额</text>
					<text class='text-color'>-{{ orderInfo.pay_coupon_fee }}元</text>
				</view>
				<view class="setList" v-if="advance.advance_type == 2 && advance.all_arrive_price > 0">
					<text class="set-left-title">定金抵现</text>
					<text class='text-color'>-{{ advance.all_arrive_price }}元</text>
				</view>
				<view class="setList" v-if="advance.small_changes_money && advance.small_changes_money > 0">
					<text class="set-left-title">抹零</text>
					<text class='text-color'>-{{ advance.small_changes_money }}元</text>
				</view>
				<view class="setList" v-if="orderInfo.delivery_fee > 0">
					<text class="set-left-title">配送费</text>
					<text>{{ orderInfo.delivery_fee }}元</text>
				</view>
				<view class="setList setlist-font" style="justify-content: flex-end;">
					<view class="dis_all_money" v-if="orderInfo.dis_all_money > 0">已优惠<text
							class='text-color'>￥{{ orderInfo.dis_all_money }}</text>
					</view>

					
					<view style="display: flex;flex-direction: column;">
						<!-- <view class="flex-cn mar_l_10">福气值<text class="all-money-font mar_l_10">{{ rebate_money }}</text>
						</view> -->
						<view class="flex-cn mar_l_10">合计<text class="all-money-font">￥{{ orderInfo.all_money }}</text>
						</view>
						
					</view>
				</view>
			</view>

			<view class="list-box" v-if="orderInfo.pickup_type == 1">
				<view class="setList setTitle">
					<text>自提信息</text>
				</view>
				<view class="setList">
					<text class="set-left-title">姓名</text>
					<text>{{ orderInfo.user_name }}</text>
				</view>
				<view class="setList">
					<text class="set-left-title">手机号</text>
					<text>{{ orderInfo.user_phone }}</text>
				</view>
				<view class="setList"
					v-if="orderInfo.pay_state == 1 && orderInfo.status == 1 && (orderInfo.order_genre == 1 || orderInfo.order_genre == 2 && orderInfo.act_state == 2 || orderInfo.order_genre == 3 && orderInfo.act_state == 1)">
					<text class="set-left-title">提货码</text>
					<text class="pick-code">{{ orderInfo.pick_code }}</text>
				</view>
			</view>
			<view class="list-box" v-if="orderInfo.pickup_type == 2 || orderInfo.pickup_type == 3">
				<view class="setList setTitle">
					<text>配送信息</text>
				</view>
				<view class="setList">
					<view class="setLeft">
						<text class="set-left-title">配送方式</text>
					</view>
					<text v-if="orderInfo.deliverInfo">{{ orderInfo.deliverInfo.driver_type }}</text>
				</view>
				<block v-if="orderInfo.pickup_type == 2">
					<view class="setList setlist-flex"
						v-if="orderInfo.deliverInfo.delivery && orderInfo.deliverInfo.delivery > 1">
						<view class="setLeft">
							<text class="set-left-title">配送服务</text>
						</view>
						<view class="setRight mysetright">
							<view class="mysetList mysetlist-flex">
								<view class="select-type">
									<text>{{ orderInfo.deliverInfo.driver_type }}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="setList setlist-flex"
						v-if="orderInfo.deliverInfo.delivery && orderInfo.deliverInfo.delivery > 1">
						<view class="setLeft">
							<text>平台单号</text>
						</view>
						<view class="setRight mysetright" catchlongpress="copy"
							:data-order_no="orderInfo.deliverInfo.driver_order">
							<view class="mysetList mysetlist-flex">
								<view class="select-type">
									<text>{{ orderInfo.deliverInfo.driver_order }}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="setList setlist-flex"
						v-if="orderInfo.deliverInfo.delivery && orderInfo.deliverInfo.delivery > 1">
						<view class="setLeft">
							<text>配送员</text>
						</view>
						<view class="setRight mysetright">
							<view class="mysetList mysetlist-flex">
								<view class="select-type">
									<text>{{ orderInfo.deliverInfo.driver_name }}</text>
								</view>
							</view>
						</view>
					</view>
				</block>
				<view class="setList">
					<view class="setLeft">
						<text class="set-left-title">姓名</text>
					</view>
					<text>{{ orderInfo.user_name }}</text>
				</view>
				<view class="setList">
					<view class="setLeft">
						<text class="set-left-title">手机号</text>
					</view>
					<text>{{ orderInfo.user_phone }}</text>
				</view>
				<view class="setList setlist-flex">
					<view class="setLeft">
						<text class="set-left-title">收货地址</text>
					</view>
					<view class="setRight mysetright">
						<text>{{ orderInfo.user_address }}</text>
					</view>
				</view>
			</view>
			<view class="list-box">
				<view class="setList setTitle">
					<text>订单信息</text>
				</view>
				<view class="setList">
					<view class="setLeft">
						<text class="set-left-title">订单号</text>
					</view>
					<view class="setRight mysetright" catchlongpress="copy" :data-order_no="orderInfo.order_no">
						<view class="mysetList">
							<view class="select-type">
								<text>{{ orderInfo.order_no }}</text>
							</view>
							<view class="copy" @tap="copy" :data-order_no="orderInfo.order_no">复制</view>
						</view>
					</view>
				</view>
				<view class="setList">
					<view class="setLeft">
						<text class="set-left-title">下单时间</text>
					</view>
					<view class="setRight mysetright">
						<view class="mysetList">
							<view class="select-type">
								<text>{{ orderInfo.add_time }}</text>
							</view>
						</view>
					</view>
				</view>

				

				<view class="setList" v-if="orderInfo.user_select_time">
					<view class="setLeft">
						<text class="set-left-title">选择{{ orderInfo.pickup_type == 1 ? '自提' : '送达' }}时间</text>
					</view>
					<view class="setRight mysetright">
						<view class="mysetList">
							<view class="select-type">
								<text>{{ orderInfo.user_select_time }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="setList" v-if="orderInfo.receiving_goods_time">
					<view class="setLeft">
						<text class="set-left-title">收货时间</text>
					</view>
					<view class="setRight mysetright">
						<view class="mysetList">
							<view class="select-type">
								<text>{{ orderInfo.receiving_goods_time }}</text>
							</view>
						</view>
					</view>
				</view>

				<view class="setList" v-if="rebate_money > 0">
					<view class="setLeft">
						<text class="set-left-title">
							福气值</text>
					</view>
					<view class="setRight mysetright">
						<view class="mysetList">
							<view class="select-type">
							<text v-if="!(orderInfo.status > 2) " style="margin-right: 10rpx;">确认收货后返</text>
								<text>{{ rebate_money }}</text>
							</view>
						</view>
					</view>
				</view>
				

				<view class="setList_v2" v-if="orderInfo.pay_state == 1">
					<view class="setLeft_v2">
						<text class="set-left-title">支付方式</text>
					</view>
					<view>
						<view v-for="(item, index) in orderInfo.payList" :key="index" class="select-type mar_l_20">
							<text>{{ item.name }}</text>
							<text class="mar_l_10" v-if="orderInfo.payList.length > 1">￥{{ item.money }}</text>
						</view>
					</view>
				</view>
				<view class="setList" v-if="orderInfo.pickup_type">
					<view class="setLeft">
						<text class="set-left-title">配送方式</text>
					</view>
					<view class="setRight mysetright">
						<view class="mysetList">
							<view class="select-type">
								<text v-if="orderInfo.pickup_type == 2">商家配送</text>
								<text v-if="orderInfo.pickup_type == 1">到店自提</text>
								<text v-if="orderInfo.pickup_type == 3">快递发货</text>
							</view>
						</view>
					</view>
				</view>
				<view class="setList" v-if="orderInfo.extraction_code">
					<view class="setLeft">
						<text class="set-left-title">祝福码</text>
					</view>
					<view class="setRight mysetright">
						<view class="mysetList">
							<view class="select-type">
								<text>{{ orderInfo.extraction_code }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="setList" v-if="orderInfo.order_genre && orderInfo.order_genre != 1">
					<view class="setLeft">
						<text class="set-left-title">订单类型</text>
					</view>
					<view class="setRight">
						<block v-if="orderInfo.order_genre == 2">
							<text>拼团订单</text>
							<text class="error" v-if="orderInfo.act_state == 3">{{ (orderInfo.pay_state ==
								0 ? '(待付款)' :'(拼团失败)')}}</text>
							<view v-else-if="orderInfo.pay_state == 1" class="bnt-comm pay-button" @tap="seeGroup">详情
							</view>
						</block>
						<block v-else-if="orderInfo.order_genre == 3">
							<text>秒杀订单</text>
							<text class="error" v-if="orderInfo.act_state == 0">{{ (orderInfo.pay_state ==
								0 ? '(待付款)' :'(秒杀失败)')}}</text>
						</block>
						<block v-else-if="orderInfo.order_genre == 4">
							<text>预售订单</text>
							<text class="error" v-if="orderInfo.tail_money_state == 1">(待付尾款)</text>
						</block>
					</view>
				</view>
				<view class="setList setlist-flex" v-if="orderInfo.remark">
					<view class="setLeft">
						<text class="set-left-title">订单留言</text>
					</view>
					<view class="setRight mysetright">
						<view class="mysetList mysetlist-font">
							<text style="text-wrap: wrap;word-break: break-word;">{{ orderInfo.remark }}</text>
						</view>
					</view>
				</view>
				<view class="setList"
					v-if="orderInfo.pay_state == 0 || (orderInfo.order_genre == 4 && orderInfo.tail_money_state == 1)">
					<view></view>
					<view class="setRight">
						<view class="bnt-comm" v-if="orderInfo.order_genre == 4 && orderInfo.tail_money_state != 1"
							@tap="cancelPay">取消订单</view>
						<view class="bnt-comm pay-button" @tap="toPay">立即付款</view>
					</view>
				</view>
			</view>
			<!-- 订单支付阶段 -->
			<view class="payment-stage" v-if="advance.advance_type == 2">
				<view class="stage-one">
					<view class="stage-left">
						<image :src="'/images/check-' + (orderInfo.pay_state == 0 ? 2 : 1) + '.png'"></image>
						<view>
							<text>阶段一: 定金</text>
							<text class="order-money-font" v-if="advance.refuse_earnest_price == 0">（不可退）</text>
							<text class="order-money-font" v-else>（可退<text
									v-if="orderInfo.pay_state != 1 && orderInfo.tail_money_state != 1">,请至售后订单查看进度</text>）</text>
						</view>
					</view>
					<view class="stage-right">￥{{ advance.all_earnest_price }}</view>
				</view>
				<view class="stage-middle"></view>
				<view class="stage-two">
					<view class="stage-left">
						<image :src="'/images/check-' + (orderInfo.pay_state == 1 ? 1 : 2) + '.png'"></image>
						<view>阶段二: 尾款</view>
					</view>
					<view class="stage-right">￥{{ advance.tail_money }}</view>
				</view>
				<view v-if="orderInfo.pay_state != 1" class="stage-tip">尾款支付时间 {{ advance.tail_start_time }} ~
					{{ advance.tail_end_time }}
				</view>
				<view v-else class="stage-tip">尾款支付时间 {{ advance.trade_date }}</view>
			</view>
		</block>

	</view>
</template>

<script>
// pages/myOrderDetail/myOrderDetail.js
var app = getApp().globalData;

export default {
	data() {
		return {
			arr: [],
			loadingHidden: false,
			showAfterSale: false,
			goodsList: [],
			activeIndex: 1,
			orderInfo: null,
			//购买详情
			advance: {},
			order_no: "",
			payList: [{
				name: '现金',
				type: 1
			},
			{
				name: '银行卡',
				type: 2
			},
			{
				name: '微信支付',
				type: 3
			},
			{
				name: '支付宝支付',
				type: 4
			},
			{
				name: '会员卡余额支付',
				type: 5
			},
			{
				name: '小程序商城微信支付',
				type: 6
			},
			{
				name: '其他支付方式',
				type: 7
			},
			{
				name: '组合支付',
				type: 8
			},
			], //支付类型 1现金  2银行卡 3微信支付   4支付宝支付  5会员卡余额支付  6小程序商城微信支付    7其他支付方式   8组合支付
			integral_name: '',
			rebate_money: 0,//福气值

		};
	},

	components: {},
	props: {},

	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function (options) {
		console.log(options);
		var order_no = options.order_no;
		this.setData({
			order_no: order_no,
		});
		this.integral_name = this.$store.integral_name;
	},

	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow: async function () {
		await this.$onLaunched;
		this.getOrderDetail();
	},
	methods: {
		//查看拼团详情
		seeGroup: function () {
			console.log('../../index/Collage/Collage?order_id=' + this.orderInfo.id + '&ty=1&type=2')
			uni.navigateTo({
				url: '../../index/Collage/Collage?order_id=' + this.orderInfo.id + '&ty=1&type=2'
			});
		},
		//取消待支付订单
		cancelPay: function () {
			var that = this;
			uni.showModal({
				title: '提示',
				content: '确认取消该订单吗？',
				confirmColor: '#ff5c6d',
				confirmText: '关闭',
				showCancel: false,
				success: result => {
					if (result.confirm) {
						getApp().globalData.sendRequest({
							url: '/Order/cancelPay',
							data: {
								order_no: that.order_no
							},
							success: function (res) {
								if (res.status == 1) {
									uni.showModal({
										title: '提示',
										content: res.msg,
										confirmColor: '#ff5c6d',
										confirmText: '关闭',
										showCancel: false,
										success: result => {
											if (result.confirm) {
												uni.navigateBack({
													delta: 1
												});
											}
										}
									});
								} else {
									uni.showModal({
										title: '错误提示',
										content: res.msg,
										confirmColor: '#ff5c6d',
										confirmText: '关闭',
										showCancel: false,
										success: result => { }
									});
								}
							}
						});
					}
				}
			});
		},
		//去支付
		toPay: function () {
			if (this.orderInfo.order_genre == 4 && this.orderInfo.tail_money_state == 1) {
				getApp().globalData.sendRequest({
					url: '/Advance/advance_tail_info',
					data: {
						order_no: this.order_no
					},
					success: res => {
						if (res.status == 1) {
							uni.navigateTo({
								url: '/pages/order/waitPay/waitPay?order_no=' + this.order_no
							});
						} else {
							uni.showModal({
								confirmColor: '#ff5c6d',
								confirmText: '确定',
								content: res.msg,
								showCancel: false,
								success: result => { },
								title: '错误提示'
							});
						}
					}
				});
			} else {
				uni.navigateTo({
					url: '/pages/order/waitPay/waitPay?order_no=' + this.order_no
				});
			}
		},
		//复制订单号
		copy: function (e) {
			uni.setClipboardData({
				data: e.currentTarget.dataset.order_no,

				success(res) {
					uni.getClipboardData({
						success(res) {
							console.log(res.data); // data
							uni.showToast({
								title: '复制成功'
							})
						}

					});
				}

			});
		},
		details: function (e) {
			if (this.orderInfo.order_genre == 4) {
				uni.navigateTo({
					url: '/pages/index/advanceDetails/advanceDetails?id=' + e.currentTarget.dataset.id
				});
			} else {
				uni.navigateTo({
					url: '/pages/mer/goods/details/details?id=' + e.currentTarget.dataset.id,
				});
			}
		},
		getOrderDetail: function () {
			var order_no = this.order_no;
			var that = this;
			that.integral_name = this.$store.integral_name;
			getApp().globalData.sendRequest({
				url: '/Order/getOrderDetail_v3',
				type: "post",
				data: {
					order_no: order_no
				},
				showLoading: true,
				success: function (res) {
					if (res.status == 1) {
						that.setData({
							orderInfo: res.order_info,
							goodsList: res.order_info.sell_info,
							loadingHidden: true,
							advance: res.order_info.order_genre == 4 ? res.order_info.advance_info : {},
							rebate_money: res.order_info.rebate_money
						});
						if (res.order_info.pay_state == 0) {
							//设置标题
							uni.setNavigationBarTitle({
								title: '订单详情（待付款）'
							});
						} else if (res.order_info.order_genre == 4 && res.order_info.pay_state != 1) {
							uni.setNavigationBarTitle({
								title: `订单详情（${res.order_info.state}）`
							});
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 1500,
							mask: true,
							success: function (res) {
								setTimeout(function () {
									uni.navigateBack({
										delta: 1
									});
								}, 1500);
							}
						});
					}
				}
			});
		}
	}
};
</script>
<style>
@import "./myOrderDetail.css";

.gift_icon {
	display: inline-block;
	width: 40rpx;
	height: 40rpx;
	background-color: #ff5e6e;
	font-size: 24rpx;
	color: #fff;
	text-align: center;
	line-height: 40rpx;
	border-radius: 8rpx 8rpx 16rpx 0;
	margin-left: 12rpx;
}
</style>
